import React, { Component } from 'react';
import '../../assets/style/shop/shop.scss';
import { Form, Table, Button, Select, Input, Image, Breadcrumb } from 'antd';
import { goods } from "../../api/index"
const FormItem = Form.Item;
const Option = Select.Option;

class Shop extends Component {
  constructor(prors) {
    super(prors)
    this.state = {
      page: 1, //显示页
      pagesize: 5,//显示的条数
      count: 0,// 总条数
      //接收数据
    }
  }
  componentDidMount() {
    this.getshoplist()
  }
  async getshoplist() {
    const { data } = await goods()
    console.log(data);
    this.setState({
      data: data.data.list,
      count: data.data.total
    })
  }
  render() {
    // const { visible } = this.state;
    const columns = [
      {
        title: '首页商品大图',
        dataIndex: 'cinformation_homepicture',
        width: 200,
        align: 'center',
        className: 'myfish',
        render: (val) => {
          return <Image src={val} width={50}/>
        }
      },
      {
        title: '访问量',
        dataIndex: 'cinformation_state',
        width: 150,
        align: 'center',
        className: 'myfish'
      },
      {
        title: '商品名称',
        dataIndex: 'cinformation_name',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '库存',
        dataIndex: 'cspecifications_stock',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '已售出',
        dataIndex: 'cspecifications_list',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '商品价',
        dataIndex: 'cspecifications_commodityprice',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '促销价',
        dataIndex: 'cspecifications_expressprice',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '创建时间',
        dataIndex: 'cbinformation_creationtime',
        align: 'center',
        className: 'myfish'
      },
      {
        title: '列表序号',
        dataIndex: 'cspecifications_list',
        align: 'center',
        className: 'myfish'
      }
    ];
    /* const data = [
      {
        key: '1',
        one: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4065718023,150217409&fm=26&gp=0.jpg',
        two: '200',
        three: '哇哈哈',
        for: '150',
        five: '85',
        six: '200',
        seven: '195',
        eight: '2020-11-01',
        nine: '5553'
      },
      {
        key: '2',
        one: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4065718023,150217409&fm=26&gp=0.jpg',
        two: '200',
        three: '哇哈哈',
        for: '150',
        five: '85',
        six: '200',
        seven: '195',
        eight: '2020-11-01',
        nine: '5553'
      },
      {
        key: '3',
        one: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4065718023,150217409&fm=26&gp=0.jpg',
        two: '200',
        three: '哇哈哈',
        for: '150',
        five: '85',
        six: '200',
        seven: '195',
        eight: '2020-11-01',
        nine: '5553'
      },
      {
        key: '4',
        one: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4065718023,150217409&fm=26&gp=0.jpg',
        two: '200',
        three: '哇哈哈',
        for: '150',
        five: '85',
        six: '200',
        seven: '195',
        eight: '2020-11-01',
        nine: '5553'
      },
      {
        key: '5',
        one: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4065718023,150217409&fm=26&gp=0.jpg',
        two: '200',
        three: '哇哈哈',
        for: '150',
        five: '85',
        six: '200',
        seven: '195',
        eight: '2020-11-01',
        nine: '5553'
      },

    ]; */
    /* const paginationProps = {
      position: 'bottomCenter'
    } */
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>商品管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className='headtop'>
          <h1>商品列表</h1>
          <div className='headmsg'>商品筛选</div>
          <div className='serchform'>
            <Form layout="inline" style={{ marginTop: '10px', }} className={"searchForm"}>
              <FormItem label="商品ID">
                <Input type="text" style={{ width: '180px' }} />
              </FormItem>
              <FormItem label="商品名称">
                <Input type="text" style={{ width: '180px' }} />
              </FormItem>
              <FormItem label="商品状态">
                <Select defaultValue="0" style={{ width: '180px' }}>
                  <Option value="0" key='1'>全部</Option>
                  <Option value="1" key='2'>出售中</Option>
                  <Option value="2" key='3'>促销中</Option>
                  <Option value="3" key='4'>已售罄</Option>
                  <Option value="4" key='5'>仓库中</Option>
                </Select>
              </FormItem>
              <Button type="primary">查询</Button>
              <Button type='primary' >重置</Button>
            </Form>
          </div>
        </div>
        <div className='listcontent'>
          <div className='listtitle'>商品列表</div>
          <div className='tablelist'>
            <Table bordered='true' columns={columns} dataSource={this.state.data} rowKey={data => data.cinformation_id} />
          </div>
        </div>
      </div>
    )
  }
}

export default Shop;